<template>
  <el-menu default-active="2" class="el-menu-vertical-demo">
    <!-- <div class="big_logo">鲸鱼后台</div> -->
    <el-menu-item index="1">
      <!-- <template #title>订单管理</template> -->
      <router-link class="RouterBtn" to="/" active-class="active" exact>
        <el-icon>
          <House />
        </el-icon>
        首页
      </router-link>
    </el-menu-item>

    <el-menu-item index="1-1">
      <router-link to="/issue" active-class="active" class="RouterBtn" exact>
        <el-icon>
          <FolderAdd />
        </el-icon>
        发布商品
      </router-link>
    </el-menu-item>

    <el-menu-item index="1-2">
      <router-link to="/manage" active-class="active" class="RouterBtn" exact>
        <el-icon><Operation /></el-icon>
        管理商品
      </router-link>
    </el-menu-item>

    <!-- <el-sub-menu index="2">
      <template #title>
        <span class="RouterBtn">
          <el-icon>
            <Ship />
          </el-icon>
          宠物商品
        </span>
      </template>

      <el-menu-item-group>
        <el-menu-item index="1-1">
          <router-link to="/issue" active-class="active" exact> 发布商品 </router-link>
        </el-menu-item>
        <el-menu-item index="1-2">
          <router-link to="/manage" active-class="active" exact> 管理商品 </router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu> -->
    <el-menu-item index="3">
      <template #title>
        <router-link class="RouterBtn" to="/blog" active-class="active" exact>
          <el-icon>
            <Tickets />
          </el-icon>
          公告管理
        </router-link>
      </template>
    </el-menu-item>
    <el-menu-item index="3-1"
      ><router-link class="RouterBtn" to="/pets" active-class="active" exact>
        <el-icon><Message /></el-icon>
        宠物领养
      </router-link></el-menu-item
    >
    <el-menu-item>
      <router-link class="RouterBtn" to="/petslost" active-class="active" exact>
        <el-icon><Search /></el-icon>
        挂失寻宠
      </router-link>
    </el-menu-item>
    <el-menu-item
          ><router-link class="RouterBtn" to="/examine" active-class="active" exact>
        <el-icon><Finished /></el-icon>

            领养审批
          </router-link>
        </el-menu-item>
    <!-- <el-sub-menu index="4">
      <template #title>
        <span class="RouterBtn">
          <el-icon>
            <Star />
          </el-icon>
          宠物
        </span>
      </template>

      <el-menu-item-group>
       
      </el-menu-item-group>
    </el-sub-menu> -->
    <el-menu-item index="5">
      <template #title>
        <router-link class="RouterBtn" to="/UserManage" active-class="active" exact>
          <el-icon>
            <User />
          </el-icon>
          用户管理
        </router-link>
      </template>
    </el-menu-item>
    <el-menu-item index="6">
      <!-- <template #title>订单管理</template> -->
      <router-link class="RouterBtn" to="/order" active-class="active" exact>
        <el-icon>
          <CreditCard />
        </el-icon>
        订单管理
      </router-link>
    </el-menu-item>
    <el-menu-item index="6">
      <!-- <template #title>订单管理</template> -->
      <router-link class="RouterBtn" to="/chatlist" active-class="active" exact>
        <el-icon><ChatDotRound /></el-icon>
        消息
      </router-link>
    </el-menu-item>
    <div>
      <div class="icon" @click="OutLogin">
        <span class="iconfont icon-tuichudenglu" style="margin-right: 6rem"></span>退出登录
      </div>
    </div>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
let router = useRouter()

// 退出登录逻辑
const OutLogin = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('users')
  ElMessage({
    message: `已退出登录！`,
    type: 'warning',
  })
  router.push('/login')
}
</script>

<style scoped lang="less">
.el-menu {
  height: 100vh;
  // box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2); /* 右边阴影 */
}
.big_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rem;
  font-size: 30rem;
  color: #0c7feb;
}
@font-face {
  font-family: 'iconfont'; /* Project id 4804949 */
  src: url('//at.alicdn.com/t/c/font_4804949_6zarp7i2fka.woff2?t=1736942098071') format('woff2'),
    url('//at.alicdn.com/t/c/font_4804949_6zarp7i2fka.woff?t=1736942098071') format('woff'),
    url('//at.alicdn.com/t/c/font_4804949_6zarp7i2fka.ttf?t=1736942098071') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tuichudenglu:before {
  content: '\e8b3';
}

// 退出登录
.icon {
  position: absolute;
  border-radius: 20rem;
  bottom: 90px;
  left: 12%;
  font-size: 10rem;
  padding: 6rem 15rem;
  background-color: #f8f9fb;
  color: #0066ff9a;
  cursor: pointer;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  padding: 60rem 0;
  padding-bottom: 140rem;
}

a {
  color: #000;
  text-align: center;
  text-decoration: none;
}

.active {
  color: #409eff;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 11%;
  // padding-left: 10rem;
}

span {
  font-size: 14rem;
}

.el-menu-item {
  font-size: 14rem;
}

// 增加路由按钮的点击区域
.RouterBtn {
  width: 100%;
  text-align: start;
  font-weight: normal;
  font-size: 11rem;
}
</style>
